<script setup lang="ts">
import { ref } from "vue";
const dialog = ref(false);
let timeSetInterval = null
const time = ref(30)

const emit = defineEmits(["onRead"]);

// 打开弹窗
function openDialog() {
  dialog.value = true
  time.value = 3
  timeSetInterval = setInterval(() => {
    if (time.value > 0) {
      time.value --
    } else {
      clearInterval(timeSetInterval)
      timeSetInterval = null
    }
  }, 1000)
}

// 关闭弹窗
function closeClick() {
  clearInterval(timeSetInterval)
  timeSetInterval = null
}

// 阅读并同意
function submitBtnClick() {
  dialog.value = false
  emit("onRead")
}

defineExpose({ openDialog });
</script>

<template>
  <div>
    <el-dialog v-model="dialog" title="免责说明" width="800" top="6vh" @close="closeClick">
      <div class="word">
        <el-scrollbar height="70vh">
          <p>《第三方数据使用免责协议》</p>
          <p>如使用本平台，您必须完全接受本协议中所包含的条款、条件和平台即时刊登的通告，并且遵守中华人民共和国关于互联网的相关法律、规定与规则。</p>
          <p>本平台有权不经提前通知随时修改本协议。本协议一经变动，将在相关页面提示修改内容;用户如果不同意本协议的修改，可以放弃访问或使用丽水市公共数据开放平台提供的任何数据、产品和服务;如果用户在协议变动后继续访问或使用丽水市公共数据开放平台，则视为已经接受协议的变动。</p>
          <h6>一、用户权利和义务</h6>
          <p>1.现阶段，用户有权免费获取本平台所提供的所有公共数据资源，享有数据资源的非排他使用权。用户可以自由地复制、发布、利用、传播和分享信息，不受歧视。</p>
          <p>2.用户在使用本平台数据资源所产生的成果中应注明公共数据资源来源为“丽水市公共数据开放平台”，及从平台下载的日期。</p>
          <p>3.用户基于本平台公共数据资源开发的各类应用和服务，应遵守有关法律、法规和规章的规定，不得用于任何可能危害国家安全和社会公共利益、侵犯商业秘密和个人隐私或其他不正当的用途。因与第三方产牛纠纷或者违反法律法规等造成的后果，由用户自行承担。</p>
          <p>4.用户及时将应用情况通过网站进行备案，并应积极配合有关的用户需求调查和数据资源调查。</p>
          <p>5.用户基于本平台公共数据资源进行开发利用时，应清楚地表明所做的任何数据分析或应用是个人或公司的行为,不得歪曲篡改从本平台获取的公共数据资源。</p>
          <p>6.用户在基于本平台数据资源的应用程序或互联网服务中应清楚地声明:源于平台的相关数据受浙江省数据开放平相关协议、条款约束。以上义务同样需要得到您的再授权用户同意并认可。</p>
          <p>7.如果本平台数据服务内容由于法律法规或政策调整等原因进行调整，用户应立即在相关应用程序或互联网服务中作相应调整。</p>
          <p>8.用户应遵守中华人民共和国有关互联网管理的相关法律法规和规章，以及所有与本平台网络服务有关的网络协议、规定和程序。禁止对本平台进行技术性破坏，不得干扰或妨害丽水市公共数据开放平台提供正常的互联网服务。用户发现任何非法使用用户帐号或安全漏洞的情况，应当立即告知本平台运营管理方。</p>
          <p>9.用户义务是本许可的重要条件，如未遵守以上要求，则根据本许可授予的权利将自动终止，用户应立即删除相关数据并停止服务。</p>
        </el-scrollbar>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" disabled v-if="time > 0">我已阅读，并同意（{{time}}s）</el-button>
          <el-button type="primary" v-else @click="submitBtnClick">我已阅读，并同意</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.word{
  width: 100%;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 0;
  p{
    text-align: justify;
  }
  h6{
    font-size: 14px;
    font-weight: bold;
  }
}

.dialog-footer{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>